<template>
 <div style="height:100%;overflow:auto;">
   <div class="headerBox">
      <div class="header border-b">
        <div class="headerText textover ft18">我的E宠</div>
        <div class="left-back">
          
        </div>
        <div class="right-more" @click="popHandler()"></div>
      </div>
    </div>
    <div v-if="show" class="menuBox">
      <div class="menuBox-nav flex">
        <a class="it1">
          <span class="mNavIco1"></span>
          <div>首页</div>
        </a>
        <a class="it1">
          <span class="mNavIco2"></span>
          <div>商品分类</div>
        </a>
        <a class="it1">
          <span class="mNavIco3 relative"></span>
          <div>购物车</div>
        </a>
        <router-link tag="a" to="/home/user" active-class="active" href="javascript:void(0);" class="it1">
          <span class="mNavIco4"></span>
          <div>我的e宠</div>
        </router-link>
      </div>
    </div>
    <div class="top_img">
      <div class="userinfo">
        <div class="clearfix operation pt15 ftc">
          <div id="01" class="f1 ml5">
            <router-link tag="a" to="/user/set" active-class="active" href="javascript:void(0);">
            <img src="./assets/img/set.png" />
            </router-link>
              
            
          </div>
          <div class="fr mr5 dib rela">
            <router-link tag="a" to="/message" active-class="active" href="javascript:void(0);">
              <img src="./assets/img/mes.png" />
            </router-link>
          </div>
        </div>
        <div class="clearfix pl10 pr10 user_info">
          <div class="userphoto f1">
            <router-link tag="a" to="/user/set" active-class="active" href="javascript:void(0);" class="db">
              <img src="./assets/img/touxiang.png" />
            </router-link>
          </div>
          <div class="username">
            <div class="cfff ft16"></div>
            <div class="grade nologin mt15">
              <router-link tag="a" to="/login" active-class="active" href="javascript:void(0);">
                <span class="cfff">登录</span>
              </router-link>
              <span class="cff">|</span>
              <router-link tag="a" to="/register" active-class="active" href="javascript:void(0);">
                <span class="cfff">注册</span>
              </router-link>
            </div>
          </div>
        </div>
        <div class="vip pl10 pr10">
          <div class="vipcon pt5 pb5 pr20 clearfix">
            <div class="f1" style="width: 25%">
              <a class="db ftc">
                <div class="liimg rela ml20">
                  <img src="./assets/img/day.png" />
                </div>
              </a>
            </div>
            <div class="f1" style="width: 25%">
              <a class="db ftc">
                <div class="liimg rela ml20">
                  <img src="./assets/img/zero.png" />
                </div>
              </a>
            </div>
            <div class="f1" style="width: 25%">
              
                <div class="liimg rela ml20">
                  <router-link tag="a" to="/uservip" active-class="active" href="javascript:void(0);" >
                  <img src="./assets/img/vip.png" />
                    </router-link>
                </div>
            
            </div>
          </div>
        </div>
      </div>
    </div>
  
   <div class="mymould_20" style="margin-bottom: 20px"></div>
   <order-com></order-com>
   <wallet-com></wallet-com>
   <tool-com></tool-com>
   
 </div>
</template>



<script>

import walletCom from "./walletCom.vue";
import orderCom from "./orderCom.vue";
import toolCom from "./toolCom.vue";
import footerNav from "../../components/nav/footer.vue";
export default {
  
  components: {
    
    "wallet-com": walletCom,
    "order-com": orderCom,
    "tool-com": toolCom,
    "footer-nav": footerNav,
  },
  data(){
    return{
      show:false
  }},
  async mounted() {
         
    },
  methods:{
    popHandler(){
      this.show=!this.show
    }
  }
};

</script>


<style lang="stylus" scoped>
.header {
  width: 100%;
  height: 0.5rem;
  background: #fff;
  line-height: 0.5rem;
  color: #333;
  position: relative;
}

.headerText {
  text-align: center;
  margin: 0 0.65rem;
}

.textover {
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
}

.ft18 {
  font-size: 0.18rem;
}

.left-back {
  width: 0.35rem;
  height: 0.35rem;
  background: url('./assets/img/topIco.bc556dcf.png') 0 0 no-repeat;
  background-size: 0.35rem auto;
  position: absolute;
  left: 0.05rem;
  top: 0.07rem;
  background-position: 0 0;
}

.right-more {
  width: 0.35rem;
  height: 0.35rem;
  background: url('./assets/img/topIco.bc556dcf.png') 0 0 no-repeat;
  background-size: 0.35rem auto;
  position: absolute;
  right: 0.05rem;
  top: 0.07rem;
  background-position: 0 -0.7rem;
}
.top_img {
  position: relative;
  
  background: url('./assets/img/backgroundV420.jpg');
}
.userinfo .operation img {
  width: 50%;
}
.username {
  margin-left: 0.8rem;
  padding-top: 0.08rem;
}
a {
  color: #333;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.block, .db {
  display: block;
}
.dib {
  display: inline-block;
}
.rela {
  position: relative;
}
.mr5 {
  margin-right: 0.05rem;
}
.fr {
  float: right;
}
.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.pt15 {
  padding-top: 0.15rem;
}
.ftc {
  text-align: center;
}
.userinfo .userphoto {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  overflow: hidden;
}
.userinfo .username {
  margin-left: 0.8rem;
  padding-top: 0.08rem;
}
.userinfo .userphoto img {
  width: 0.7rem;
  height: 0.7rem;
}
a img {
  border: 0;
}
img {
  vertical-align: middle;
}
.cfff {
  color: #fff;
}
.cff {
  padding: 0 0.08rem;
  color: #fff;
}
.ft16 {
  font-size: 0.16rem;
}
.mt15 {
  margin-top: 0.15rem;
}
.f1 {
  float: left;
}
.ml5 {
  margin-left: 0.05rem;
}
.user_info {
  margin: 0.3rem 0;
}

.vipcon {
  background: #252525;
  border-radius: 0.15rem 0.15rem 0rem 0rem;
}
.pr20 {
  padding-right: 0.2rem;
}
.pl10 {
  padding-left: 0.1rem;
}
.pt10 {
  padding-top: 0.1rem;
}
.pt5 {
  padding-top: 0.05rem;
}
.pr10 {
  padding-right: 0.1rem;
}
.ml20 {
  margin-left: 0.2rem;
}
.mt20 {
  margin-top: 0.2rem;
}
.vipcon .liimg img {
  width: 100%;
}
.pb5
  padding-bottom 0.05rem
.menuBox {
    overflow: hidden;
    transition: height 6s;
}
.menuBox-nav{
    height: 65px;
    background: #fff;
}
.menuBox-nav a {
    font-size: 14px;
    color: #666;
    text-align: center;
    padding-top: 11px;
}
.mNavIco1, .mNavIco2, .mNavIco3, .mNavIco4 {
    display: block;
    margin: auto;
    width: 0.25rem;
    height: 0.25rem;
    background: url("./assets/img/spirit.png") 0 0 no-repeat;
    background-size: 2.34rem 1.63rem;
}
.relative {
    position: relative;
}
.mNavIco1 {
    background-position: -1.72rem -0.07rem;
}
.mNavIco2 {
    background-position: -1.72rem -0.49rem;
}
.mNavIco3 {
    background-position: -1.72rem -0.9rem;
}
.mNavIco4 {
    background-position: -1.72rem -1.33rem;
}
.flex
  display flex
.it1, .it2 {
    display: block;
    min-width: 0;
}
.it1 {
    -webkit-box-flex: 1;
    flex: 1;
}
</style>
